<template>
     <view class="loan-form-container">
        <view class="page-header">
            <image src="@/static/icons/warning.png" mode="widthFix" style="width: 30rpx; margin-right: 10rpx;"></image>请确保输入的姓名与对方的真实姓名一致,否则欠条将无法生效
        </view>
        <view class="form-section">
            <view class="form-item">
                <view class="form-label">真实姓名</view>
                <view class="form-input-wrapper">
                    <input class="form-input" placeholder="请填写真实姓名" v-model="formData.realName" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">身份证号</view>
                <view class="form-input-wrapper">
                    <input class="form-input" placeholder="请填写身份证号" v-model="formData.idCard" />
                </view>
            </view>
            <view class="page-footer">
                为保证交易安全，建议您填写对方身份证号
            </view>
        </view>
        <view class="next-btn" @click="save">提交</view>
        <view class="contract-list">往来记录</view>
        <u-cell-group style="height: 650rpx; overflow-y: scroll;">
          <u-cell :title="item.otherName" :value="item.otherIdCard" @click="selectContract(item)" :isLink="true" arrow-direction="right" v-for="(item, index) in contractList" :key="index"></u-cell>
        </u-cell-group>
     </view>
</template>
<script>
import { getContractList } from '@/api/user'
export default {
    data() {
        return {
            role: '',
            formData: {
                realName: '',
                idCard: ''
            },
            contractList: []
        }
    },
    onLoad() {
       this.role = uni.getStorageSync('userRole')
       this.getContractList()
    },
    methods: {
      selectContract(item) {
        this.formData.realName = item.otherName
        this.formData.idCard = item.otherIdCard
      },
      
    checkIdNumber(idNumber) {
        // 正则表达式验证身份证格式
        const reg = /^(?:\d{15}|\d{17}[\dX])$/;
        if (!reg.test(idNumber)) {
            console.error('身份证号码格式不正确');
            return false;
        }

        // 如果是18位身份证，进行校验位验证
        if (idNumber.length === 18) {
            const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            const checkDigits = '10X98765432';
            let sum = 0;

            for (let i = 0; i < 17; i++) {
                sum += idNumber[i] * weights[i];
            }

            const checkDigit = checkDigits[sum % 11];
            if (checkDigit !== idNumber[17]) {
                console.error('身份证号码校验位不正确');
                return false;
            }
        }

        console.log('身份证号码有效');
        return true;
    },
        getContractList() {
            getContractList().then(res => {
                console.log(res)
                this.contractList = res.data.data
            })
        },
        isIdCardValid(idCard) {
            // 判断身份证号是否正确
            if (!/^\d{17}(\d|x)$/i.test(idCard)) {
                return false
            }
            return true
        },
        save() {
            // 判断是否填写了真实姓名和正确的身份证号
            if (!this.formData.realName) {
                uni.showToast({
                    title: '请填写真实姓名',
                    icon: 'none'
                })
                return
            }
            if (!this.formData.idCard || !this.checkIdNumber(this.formData.idCard)) {
                uni.showToast({
                    title: '请填写正确的身份证号',
                    icon: 'none'
                })
                return
            }
            
            uni.navigateTo({
                url: `/pages/loan/${this.role}?realName=${this.formData.realName}&idCard=${this.formData.idCard}`
            })
        }
    }
}
</script>


<style lang="scss">
.loan-form-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 40rpx;
}
.contract-list{
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  padding: 30rpx;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    font-size: 24rpx;
}
.page-footer{
    display: flex;
    align-items: center;
    padding: 20rpx 0rpx;
    font-size: 24rpx;
    color: #9f9f9f;
}
.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 30rpx;
  color: #333;
  width: 160rpx;
}

.form-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.form-input {
  text-align: right;
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.unit {
  color: #999;
  font-size: 30rpx;
  margin-left: 10rpx;
}

.arrow-icon {
  margin-left: 10rpx;
}

.reason-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.reason-tag {
  padding: 15rpx 30rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.reason-tag.active {
  background-color: #1989fa;
  color: #fff;
}

.reason-input {
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  min-height: 150rpx;
}

.detailed-reason {
  width: 100%;
  height: 150rpx;
  font-size: 28rpx;
  color: #333;
}

.next-btn {
  height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 20rpx;
}
</style> 
